<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<title></title>
		<script src="../../js/mui.min.js"></script>
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<!--swiper-->
		<link href="../../js/swiper/swiper.min.css" rel="stylesheet" />
		<script src="../../js/swiper/swiper.min.js"></script>
		<script type="text/javascript" src="../../js/jquery-1.9.1.min.js"></script>

	</head>
	<style>
		ul,
		li {
			list-style: none;
			padding: 0;
		}
		/*轮播*/
		/*.swiper-banner{margin-top: 45px;}*/
		
		.swiper-banner .swiper-slide img {
			display: block;
			width: 100%;
		}
		
		.soluday {
			position: relative;
			background-color: #fff;
			padding: 15px 10px;
		}
		
		.soluday h4 span {
			font-size: 12px;
			padding-left: 10px;
			color: #aaa;
			font-weight: normal;
		}
		
		.soluday p {
			padding-right: 30px;
			text-align: justify;
			box-sizing: border-box;
		}
		
		.soluday>span {
			position: absolute;
			top: 50%;
			margin-top: -12px;
			right: 20px;
			display: block;
			content: '>';
			width: 8px;
			height: 8px;
			text-align: center;
		}
		
		.act-title {
			line-height: 35px;
			padding-left: 10px;
		}
		
		#actlist .actlist-item {
			border-bottom: 1px solid #eee;
		}
		
		#actlist .actlist-item p {
			padding: 10px;
		}
		
		#actlist .actlist-item img {
			width: 100%;
		}
	</style>

	<body>

		<div class="mui-content">
			<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
				<div class="mui-scroll">
					<div class="swiper-container swiper-banner">
						<div class="swiper-wrapper">
							<div class="swiper-slide"><img src="../../images/banner/1.jpg"></div>
							<div class="swiper-slide"><img src="../../images/banner/1.jpg"></div>
						</div>
						<!-- 如果需要分页器 -->
						<div class="swiper-pagination"></div>
					</div>
					<!--轮播-->
					<div class="soluday" id="soluday">
						<span class="mui-icon mui-icon-arrowright"></span>
						<h4>每日解读<span>更新于 2018.1.18 20:18:52</span></h4>
						<p>西班牙RAC1电台：加泰罗尼亚独立派表示尚未就加泰罗尼亚独立派前领导人普伊格蒙特</p>
					</div>
					<!--每日解答-->
					<h4 class="act-title">活动</h4>
					<ul class="mui-table-view" id="actlist">
						<!--<li class="actlist-item">
							<img src="../images/actpic/1.jpg">
							<p>陆金所当选中国互联网金融协会第一任常务理事。</p>
						</li>
						<li class="actlist-item">
							<img src="../images/actpic/2.jpg">
							<p>陆金所当选中国互联网金融协会第一任常务理事。</p>
						</li>-->
					</ul>
					<!--活动-->
				</div>
			</div>
			<!--活动列表-->

		</div>
		<script src="../../js/act-data.js"></script>
		<script type="text/javascript" charset="utf-8">
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					down: {
						style: 'circle',
						callback: pulldownRefresh
					}
				}
			});

			//轮播
			var swiper = new Swiper('.swiper-banner', {
				slidesPerView: 1,
				loop: true,
				// 如果需要分页器
				pagination: {
					el: '.swiper-pagination',
				},
				autoplay: true
			});
			//
			mui.plusReady(function() {
				//预加载页面新闻
				var newsPage = mui.preload({
					url: '/html/news/news-show.html',
					id: 'news-show'
				});

				///预加载页面活动
				var activeShow = mui.preload({
					url: '/html/active/active-show.html',
					id: 'active-show'
				})
				//
				document.getElementById('soluday').addEventListener('tap', function() {
					mui.openWindow({
						url: '/html/news/news-show.html',
						id: 'news-show'
					});
				});

				//打开页面
				mui('#actlist').on('tap', 'li', function() {
					mui.fire(activeShow, 'actTitle', {
						'title': this.innerHTML
					});
					mui.openWindow({
						url: '/html/active/active-show.html',
						id: 'active-show'
					})
				});
				//
			});
			/**
			 * 下拉刷新具体业务实现
			 */
			var last = -5,
				amount = 5;

			function addData() {
				last = last + amount;
				mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
				var table = document.body.querySelector('.mui-table-view');
				var cells = document.body.querySelectorAll('.mui-table-view-cell');

				$.ajax({
					//请求方式  
					type: "GET",
					//文件位置  
					url: "http://localhost/?json=1",
					//返回数据格式为json,也可以是其他格式如  
					dataType: "jsonp",
					//请求成功后要执行的函数，拼接html  
					success: function(data) {
						console.log(data);
						//解析json
						var obj = data.posts
						
						$.each(obj, function(i,d) {
							var li = document.createElement('li');
								li.className = 'actlist-item';
								li.innerHTML = '<img src=' + obj[i].src + '>' + '<p>' + obj[i].title + '</p>';
								//下拉刷新，新纪录插到最前面；
								table.insertBefore(li, table.firstChild);
						});
					
					},
					error: function() {
						console.log('失败');
					}
				});

			}
			/**
			 * 下拉刷新具体业务实现
			 */
			function pulldownRefresh() {
				setTimeout(function() {
					addData();
					mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
					mui.toast("更新了");
				}, 1500);
			}
		</script>
	</body>

</html>